<style>
.clinic {
	display: table;
    position: relative;
    width: 100%;
    margin: 0px 0px 5px 0px;
    background-color: #E1EEF4;
}

.clinicName {
	background-color: #2191C0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 4px 10px;
    width: 300px;
    text-align: right;
    float: left;
}

.clinic-norm-id{
	visibility: hidden; 
	width: 0px;
}

.clinicsSelect {
	width: 250px;
	float: left;
	font-size: 12px !important;
	font-family: 'Helvetica', 'Arial', 'Sans' !important;
}

.clinicsDescription {
    color: #00557F;
    text-align: center;
    width: 100%;
    display: table;
    vertical-align: middle;
}

.clinicsName {
	background-color: #2191C0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 4px 10px;
    width: 300px;
    text-align: right;
    float: left;
}

.editButtonDiv {
	display: table;
    height: 25px;
    position: relative;
    width: 100%;
}

.clinics-checkbox {
	float: left;
	margin-top: 6px;
}

.clinicalManifestationName {
	float: left;
	width: 320px;
}

.clinicDescriptionArea {
	display: table;
	margin: 5px 5px 5px 350px;
	line-height: 25px;
}
</style>

<script>
$(document).ready(function() {
	$(".clinicsSelect").each(function() {
		setClinicsDisabled(this);
	});
	var isChecked = null;
	$(".clinic-norm-checked").each(function() {
		isChecked =  $(this).val();
		if(isChecked == "true"){
			$(this).next(".clinics-checkbox").attr("checked", "checked");
			setClinicsEnabled($(this).parent().find(".clinicsSelect"));
		}
		var clinicsNormId = $(this).attr("name");
		$(this).parent().find(".clinicsSelect option[value=" + clinicsNormId + "]").attr("selected", "selected");
	});
});

$(".clinics-checkbox").click(function(){
	if($(this).is(":checked")){
		setClinicsEnabled($(this).parent().find(".clinicsSelect"));
	} else{
		setClinicsDisabled($(this).parent().find(".clinicsSelect"));
	}
});

var setClinicsEnabled = function (element) {
	$(element).removeAttr('disabled');
	$(element).closest('.clinic').find('.clinicName').css('background', '#FF8732');
}

var setClinicsDisabled = function (element) {
	$(element).attr('disabled', 'disabled');
	$(element).closest('.clinic').find('.clinicName').css('background', '#2191C0');
}

var updateClinicalManifestations = function () {
	var jsonObject = "";
	var surveyId = $("#hidden-survey-id").val();
	jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";

	jsonObject = jsonObject + "'clinicalManifestationNorms':[";
	var id = null;
	var isChecked = null;
	$(".clinics-checkbox").each(function() {
		isChecked = $(this).is(":checked");
		id = $(this).parent().find(".clinicsSelect option:selected").val();
		jsonObject = jsonObject + "{'id':" + id;
		jsonObject = jsonObject + ",'isChecked': " + isChecked + "},";
	});
	jsonObject = jsonObject.substring(0, jsonObject.length - 1);
	jsonObject = jsonObject + "]}";
	console.log(jsonObject);
	
	$.ajax({
		type : "POST",
		url : "/surveyView/updateClinicalManifestations",
		data : jsonObject,
		dataType : "json",
		contentType : "application/json",
		success : function(data) {
			noty({
				text: "&{'clinic.save.success'}",
				layout: "topRight",
				type: "success"
			});
		},
		error : function(e) {
			noty({
				text: "&{'clinic.save.error'}",
				layout: "topRight",
				type: "error"
			});
		}
	});
}
</script>

<div id="clinics-info">
	#{if contentMap != null && !contentMap.isEmpty()}
		#{list items:contentMap.keySet(), as:'surveyClinicalManifestationComplaint'}
			<div class="clinic">
				<div class="clinicsName">${surveyClinicalManifestationComplaint.clinicalManifestationComplainName}</div>
				<div class="clinicDescriptionArea">
					#{list items:contentMap.get(surveyClinicalManifestationComplaint), as:'surveyClinicalManifestation'}
						<div class="clinicsDescription">
							<input class="clinic-norm-checked" type="text" value="${surveyClinicalManifestation.isChecked}" name="${surveyClinicalManifestation.clinicalManifestationNorm.id}" style="display: none;"/>
							<input class="clinics-checkbox" type="checkbox">
							<div class="clinicalManifestationName">${surveyClinicalManifestation.clinicalManifestationNorm.clinicalManifestation.name}</div>
							#{if surveyClinicalManifestation.clinicalManifestationNorm.clinicalManifestation.clinicalManifestationType.name() == 'DROPDOWN'}
					   			#{select 'clinicalManifestationNorms', class:"clinicsSelect"}
									#{list items:surveyClinicalManifestation.clinicalManifestationNorm.clinicalManifestation.clinicalManifestationNorms, as:'clinicalManifestationNorm'}
										#{option clinicalManifestationNorm.id}
											${clinicalManifestationNorm.description}
										#{/option}
					    			#{/list}
								#{/select}
							#{/if}
						</div>
					#{/list}
				</div>
			</div>
		#{/list}
		<div class="editButtonDiv">
			<input type="submit" class="editButton" onclick="updateClinicalManifestations()" id="editButton" value="&{'save'}">
		</div>
	#{/if}
</div>